<template>
  <div>
    <Nav/>
    <!-- 画集右上角显示图标 -->
    <div class="content">
      <div class="search-box">
        <div class="search-condition type-box">
          <span class="label">类型：</span>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" value="PIC" id="flexCheckDefault" v-model="queryParam.type">
            <label class="form-check-label" for="flexCheckDefault">
              图片
            </label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" value="ALBUM" id="flexCheckChecked" v-model="queryParam.type">
            <label class="form-check-label" for="flexCheckChecked">
              画集
            </label>
          </div>
        </div>
        <div class="search-condition">
          <span class="label">标签：</span>
          <TagDisplay v-bind:selectedTags="selectedTags" v-bind:initTagId="this.queryParam.tagId" style="display: inline-block;"></TagDisplay>
        </div>
      </div>

      <FileList v-bind:files="files" v-on:filing="filing($event)"></FileList>
      <PageList v-bind:total="totalFileNum" v-bind:current="queryParam.pageNum" v-bind:pageSize="queryParam.pageSize" v-on:page-change="changePage($event)" style="margin-top: 40px;" ></PageList>
    </div>
  </div>


</template>

<script>
  import http from '../utils/http.js'
  import common from '../utils/common.js'
  import Nav from './Nav'
  import PageList from './PageList'
  import FileList from './FileList'
  import ConfirmDialog from './ConfirmDialog'
  import TagDisplay from './tag/TagDisplay'
  export default {
    name: 'Discovery',
    components: {
      Nav,
      PageList,
      FileList,
      ConfirmDialog,
      TagDisplay,
    },
    methods: {
      init() {
        console.log(this.$route.params)
        this.updateQueryParam(this.$route.params.type, this.$route.params.tagId, this.$route.params.pageNum,
                              this.$route.params.pageSize);
                              
        this.fetchData();
      },
      updateQueryParam(type, tagId, pageNum, pageSize) {
        this.queryParam.type = type ? type : this.queryParam.type;
        this.queryParam.tagId = tagId ? tagId : this.queryParam.tagId;
        this.queryParam.pageNum = pageNum ? parseInt(pageNum) : this.queryParam.pageNum;
        this.queryParam.pageSize = pageSize ? pageSize : this.queryParam.pageSize;
      },
      fetchData() {
        let that = this;
        let queryParam = common.shallowCopyObj(this.queryParam);
        queryParam.tagId = queryParam.tagId.join(',');
        queryParam.type = queryParam.type.join(',');
        http.get('/one-piece', queryParam, data => {
          data.list.forEach(file => {
            that.fillData(file);
          });
          that.files = data.list;
          that.totalFileNum = data.total;
        })
      },
      fillData(file) {
        file.filename = file.name;
        file.iconUrl = IMAGE_URL + file.imageCode;
      },
      filing(index) {
        this.queryParam.index = index;
        this.$router.push({
          name: 'OnePieceFiling',
          params: this.queryParam
        });
      },
      /**
       * 切换页码
       * */
      changePage(pageNum) {
        this.queryParam.pageNum = pageNum;
        this.fetchData();
      },
    },
    // 监听实时搜索
    watch: {
      selectedTags: {
        handler: function (to, from) {
          let tagIds = [];
          for (let tagId in this.selectedTags) {
            tagIds.push(tagId);
          }
          this.queryParam.tagId = tagIds;
          this.fetchData();
        },
      },
      'queryParam.type': {
        handler: function (to, from) {
          this.queryParam.pageNum = 1;
          this.fetchData();
        },
      },
      '$route' (to, from) {
        this.init();
      }
    },
    mounted() {
      this.init();
    },
    data() {
      return {
        queryParam: {
          type: ['PIC', 'ALBUM'],
          tagId: [],
          pageNum: 1,
          pageSize: 15
        },
        files: [],
        totalFileNum: 0,
        currentPage: 1,
        selectedTags: {},
      }
    }
  }
</script>

<style>
  .content {
      width: 90%;
      margin: 20px auto;
  }
  .search-condition {
    margin-bottom: 10px;
  }
  .label {
    font-weight: bold;
    margin-right: 10px;
    margin-left: 5px;
  }
  .search-box {
    margin: 20px 0;
  }
  .type-box > * {
    margin-right: 10px;
  }
  .form-check {
    display: inline-block;
  }
</style>
